<template>
  <div>

    <sky-panel title="业态分摊">
      <template #header>
        <span>结合树形表格组件实现业态分摊功能</span>
      </template>
      <template #handle>{{ '待分摊金额：'+ toThousandDecimalFilter(formatsSharemMoney) }}</template>
      <template #main>

        <sky-tree-table
          ref="skyTable"
          v-slot="row"
          :data="data"
          node-key="id"
          fixed-head
          show-checkbox
          auto-parent-checked
          :max-height="350"
          :props="defaultProps"
          @getCurrent="getCurrent"
        >
          <sky-tree-column :row="row?.scope" prop="name" label="业态/科目名称" width="350" ladder fixed fixed-left-width="0">
            {{ row?.scope?.data.name }}
            <span v-if="row?.scope?.data.NoCompletely" title="分摊有误" class="warning-icon">!</span>
          </sky-tree-column>
          <sky-tree-column :row="row?.scope" prop="planAmountTax" label="规划金额(含税)" align="right">
            <span v-if="row.scope.childNodes.length==0">{{ toThousandDecimalFilter(row.scope.data.planAmountTax) }}</span>
            <el-input v-else v-model="row.scope.data.planAmountTax" v-thousands.planAmountTax="row.scope.data" @blur="planAmountTaxChange(row.scope,row.scope.data.planAmountTax)" />
          </sky-tree-column>
          <sky-tree-column :row="row?.scope" prop="rate" label="分摊比率" align="right">
            <el-input v-if="row.scope.childNodes.length>0" v-model="row.scope.data.rate" v-rate.rate="row.scope.data" @blur="rateChange(row.scope,row.scope.data.rate)" />
            <span v-else>{{ row.scope.data.rate * 100 +'%' }}</span>
          </sky-tree-column>
        </sky-tree-table>

      </template>
    </sky-panel>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import _ from 'lodash'

export default defineComponent({
  setup() {
    const skyTable = ref()
    const formatsSharemMoney = ref(1000000)

    const data = ref([
      {
        id: '1',
        name: '办公楼',
        planAmountTax: 0,
        rate: 0.4,
        children: [
          {
            id: '1-1',
            name: 'A号楼',
            planAmountTax: 0,
            rate: 0.7,
            children: [
              {
                id: '1-1-1',
                name: '电力配套设施费',
                planAmountTax: 0,
                rate: 0.4
              }, {
                id: '1-1-2',
                name: '供暖接口费',
                planAmountTax: 0,
                rate: 0.3
              }, {
                id: '1-1-3',
                name: '供暖管网清洗费',
                planAmountTax: 0,
                rate: 0.3
              }
            ]
          }, {
            id: '1-2',
            name: 'B号楼',
            planAmountTax: 0,
            rate: 0.3,
            children: [
              {
                id: '1-2-1',
                name: '电力配套设施费',
                planAmountTax: 0,
                rate: 0.4
              }, {
                id: '1-2-2',
                name: '供暖接口费',
                planAmountTax: 0,
                rate: 0.3
              }, {
                id: '1-2-3',
                name: '供暖管网清洗费',
                planAmountTax: 0,
                rate: 0.3
              }
            ]
          }
        ]
      },
      {
        id: '2',
        name: '体育馆',
        planAmountTax: 0,
        rate: 0.3,
        children: [
          {
            id: '2-1',
            name: '东区',
            planAmountTax: 0,
            rate: 1,
            children: [
              {
                id: '2-1-1',
                name: '桩的承载力检测',
                planAmountTax: 0,
                rate: 0.6
              },
              {
                id: '2-1-2',
                name: '桩基静载检测费',
                planAmountTax: 0,
                rate: 0.4
              }
            ]
          }
        ]
      },
      {
        id: '3',
        name: '住宿区',
        planAmountTax: 0,
        rate: 0.3,
        children: [
          {
            id: '3-1',
            name: '一区',
            planAmountTax: 0,
            rate: 0.5,
            children: [
              {
                id: '3-1-1',
                name: '消防检测费',
                planAmountTax: 0,
                planAmount: 0,
                rate: 0.5
              }, {
                id: '3-1-2',
                name: '卫生防疫检测',
                planAmountTax: 0,
                planAmount: 0,
                rate: 0.2
              }, {
                id: '3-1-3',
                name: '水质检测费',
                planAmountTax: 0,
                planAmount: 0,
                rate: 0.3
              }
            ]
          }, {
            id: '3-2',
            name: '二区',
            planAmountTax: 0,
            rate: 0.5,
            children: [
              {
                id: '3-1-1',
                name: '消防检测费',
                planAmountTax: 0,
                rate: 0.5
              }, {
                id: '3-1-2',
                name: '卫生防疫检测',
                planAmountTax: 0,
                rate: 0.2
              }, {
                id: '3-1-3',
                name: '水质检测费',
                planAmountTax: 0,
                rate: 0.3
              }
            ]
          }
        ]
      }
    ])

    const planAmountTaxChange = (row: any, value: any) => {
      if (row.level === 1) {
        row.data.rate = _.divide(value, formatsSharemMoney.value)
      } else {
        row.data.rate = _.divide(value, row.parent.data.planAmountTax)
      }
      startShare()
      checkCompletelyShare(row)
    }

    const rateChange = (row: any, value: any) => {
      if (row.level === 1) {
        row.data.planAmountTax = _.multiply(value, formatsSharemMoney.value)
      } else {
        row.data.planAmountTax = _.multiply(value, row.parent.data.planAmountTax)
      }
      startShare()
      checkCompletelyShare(row)
    }

    const downComputed = (data: any, value: any) => {
      data.length > 0 && data.map((item:any) => {
        item.planAmountTax = _.multiply(parseFloat(value), item.rate)
        if (item.children && item.children.length > 0) {
          downComputed(item.children, item.planAmountTax)
        }
      })
    }
    const startShare = () => {
      downComputed(skyTable.value.store.data, formatsSharemMoney.value)
    }

    const checkCompletelyShare = (row:any) => {
      let childAllMeney = 0;
      (row.level === 1 ? row.parent.data : row.parent.data.children).map((item: { planAmountTax: number }) => {
        childAllMeney += item.planAmountTax
      })
      console.log(childAllMeney)
      if (Math.abs((row.level === 1 ? (formatsSharemMoney as any).value : row.parent.data.planAmountTax) - childAllMeney) <= 1) {
        (row.level === 1 ? row.parent.data : row.parent.data.children).map((item: { planAmountTax: number }) => {
          item['NoCompletely'] = false
        })
      } else {
        (row.level === 1 ? row.parent.data : row.parent.data.children).map((item: { planAmountTax: number }) => {
          item['NoCompletely'] = true
        })
      }
      // console.log('row', row)
    }

    onMounted(() => {
      startShare()
    })

    return { skyTable, formatsSharemMoney, data, planAmountTaxChange, rateChange, startShare, checkCompletelyShare }
  }
})
</script>

<style lang="less" scoped>
.warning-icon{
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  margin: auto;;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
  background: #e6a23c;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}
</style>